<script setup lang="ts">
import { onMounted, ref } from 'vue';

import { message, Skeleton } from 'ant-design-vue';

import { useVbenForm } from '#/adapter/form';
import { getSetting, settingPost } from '#/api/admin/backup';

const loading = ref<boolean>(true);
async function onSubmit(values: Record<string, any>) {
  const { msg } = await settingPost({
    setting: {
      path: values.path,
      part: values.part,
      compress: values.compress,
      level: values.level,
    },
  });
  message.success(msg);
}

const [Form, formApi] = useVbenForm({
  resetButtonOptions: { show: false },
  handleSubmit: onSubmit,
  schema: [
    {
      component: 'Input',
      defaultValue: './upload/Data/',
      componentProps: {
        placeholder: '请输入',
        disabled: true,
      },
      fieldName: 'path',
      label: '备份路径',
      rules: 'required',
    },
    {
      component: 'Input',
      defaultValue: 10_485_760,
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'part',
      label: '卷大小',
    },
    {
      component: 'Switch',
      defaultValue: '1',
      componentProps: {
        placeholder: '请输入',
        checkedValue: '1',
        unCheckedValue: '0',
        checkedChildren: '是',
        unCheckedChildren: '否',
      },
      fieldName: 'compress',
      label: '压缩',
    },
    {
      component: 'Select',
      defaultValue: '1',
      dependencies: {
        show(values) {
          return !!values.compress;
        },
        triggerFields: ['compress'],
      },
      componentProps: {
        options: [
          { label: '普通', value: '1' },
          { label: '一般', value: '4' },
          { label: '最高', value: '9' },
        ],
        placeholder: '请选择',
      },
      fieldName: 'level',
      label: '压缩级别',
    },
  ],
});

const onInfo = async () => {
  const { data } = await getSetting();
  if (data) {
    formApi.setValues(data);
  }

  loading.value = false;
};

onMounted(async () => {
  await onInfo();
});
</script>

<template>
  <Skeleton :loading="loading">
    <Form />
  </Skeleton>
</template>
